<template>
  <div class="con-box">
    <div class="box-tit" v-if="showApplyRefund">{{$t('applyReturn.applyAfterSales')}}</div>
    <div class="box-tit" v-if="!showApplyRefund">{{$t('applyReturn.viewAfterSales')}}</div>
    <!-- 提交售后申请 -->
    <div :class="['box-content','apply-return',this.$store.state.locale == 'en'?'en':'']" v-if="showApplyRefund">
      <div class="item" v-for="(refundItem, index) in orderItem" :key="index">
        <div class="tit">{{$t('applyReturn.refundedProducts')}}：</div>
        <div class="goods-info">
          <div class="goods-img">
            <img :src="refundItem.pic" alt />
          </div>
          <div class="goods-text">
            <div class="name">{{ refundItem.prodName }}</div>
            <div class="sku">
              {{ refundItem.skuName }}
              <span class="num">×{{ refundItem.prodCount }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="tit">{{$t('applyReturn.serviceType')}}：</div>
        <div
          :class="[
            'apply-item',
            orderRefundParam.applyType == 1 || status == 2 ? 'active' : '',
          ]"
          @click="returnType(1)"
        >
          {{$t('applyReturn.refundsOnly')}}
        </div>
        <div
          :class="[
            'apply-item',
            orderRefundParam.applyType == 2 ? 'active' : '',
          ]"
          @click="returnType(2)"
          v-if="status != 2"
        >
          {{$t('applyReturn.returnsAndRefunds')}}
        </div>
      </div>
      <div class="item" v-if="status != 2">
        <div class="tit">{{$t('applyReturn.cargoStatus')}}：</div>
        <div
          :class="[
            'apply-item',
            orderRefundParam.isReceiver == 0 ? 'active' : '',
          ]"
          @click="goodsStatus(0)"
        >
          {{$t('applyReturn.noGoodsReceived')}}
        </div>
        <div
          :class="[
            'apply-item',
            orderRefundParam.isReceiver == 1 ? 'active' : '',
          ]"
          @click="goodsStatus(1)"
        >
          {{$t('applyReturn.receivedGoods')}}
        </div>
      </div>
      <div :class="['item', showSelectTips ? 'error' : '']">
        <div class="tit"><span class="asterisk">*</span>{{$t('applyReturn.refundReason')}}：</div>
        <div class="retur-reason">
          <div class="reason-tit" @click="selectReason">
            {{
              orderRefundParam.buyerReasonStr
                ? orderRefundParam.buyerReasonStr
                : $t('applyReturn.select')
            }}
          </div>
          <div
            class="reason-select"
            v-if="showReasonOptions && orderRefundParam.isReceiver == 0"
          >
            <!-- 未发货或未收到货退款原因 -->
            <div
              class="s-item"
              v-for="(reason, index) in refundPriReasonArray"
              :key="index"
              :data-reason="reason"
              :data-idx="index"
              @click="returnReason($event)"
            >
              {{ reason }}
            </div>
          </div>
          <div
            class="reason-select"
            v-if="showReasonOptions && orderRefundParam.isReceiver == 1"
          >
            <!-- 已发货退款原因 -->
            <div
              class="s-item"
              v-for="(reason, index) in refundProdReasonArray"
              :key="index"
              :data-reason="reason"
              :data-idx="index"
              @click="returnReason($event)"
            >
              {{ reason }}
            </div>
          </div>
        </div>
        <div class="error-text" v-if="showSelectTips">{{$t('applyReturn.pleaseSelectReason')}}</div>
      </div>
      <div
        class="item"
        v-if="
          orderRefundParam.applyType == 2 &&
          orderRefundParam.refundType == 2 &&
          totalRefundScore == 0
        "
      >
        <div class="tit">{{$t('applyReturn.refundQuantity')}}：</div>
        <div class="counter-box">
          <span
            class="reduce"
            onselectstart="return false"
            @click="changePordNum(-1)"
            >-</span
          >
          <input
            type="text"
            class="prod-num-int"
            v-model="goodsNum"
            readonly="true"
          />
          <span
            class="increase"
            onselectstart="return false"
            @click="changePordNum(+1)"
            >+</span
          >
        </div>
      </div>
      <div :class="['item', showAmountTips ? 'error' : '']">
        <div class="tit"><span class="asterisk">*</span>{{$t('applyReturn.refundAmount')}}：</div>
        <a
          class="unalterable"
          v-if="
            orderItem.platformShareReduce > 0 ||
            totalRefundScore > 0 ||
            orderRefundParam.refundType == 1
          "
          :title="$t('applyReturn.refundAmountModified')"
        >
          <span v-if="actualTotal && actualTotal > 0">￥{{ actualTotal }}</span>
          <span v-if="actualTotal > 0 && totalRefundScore > 0">+</span>
          <span v-if="totalRefundScore && totalRefundScore > 0">{{
            totalRefundScore + $t('applyReturn.points')
          }}</span>
        </a>
        <div class="return-price" v-else>
          <span class="prefix">￥</span>
          <input
            type="text"
            class="text"
            v-model.number="actualTotal"
            maxlength="20"
            :placeholder="$t('applyReturn.pleaseEnterAmount')"
            @blur="resetActualTotal"
          />
          <span class="return-score" v-if="totalRefundScore"
            >+ {{ totalRefundScore }} {{$t('applyReturn.points')}}</span
          >
        </div>
        <div class="price-des">
          {{$t('applyReturn.maximumRefundable')}}
          <span v-if="refundAmount && refundAmount > 0"
            >￥{{ refundAmount }}</span
          >
          <span v-if="refundAmount > 0 && totalRefundScore > 0">+</span>
          <span v-if="totalRefundScore && totalRefundScore > 0">{{
            totalRefundScore + $t('applyReturn.points')
          }}</span>
          <span v-if="showTransfee && transfee > 0">+{{$t('applyReturn.postage')}}￥{{ transfee }}</span>
          <!-- <span v-if="transfee && orderRefundParam.refundType == 2 && status == 2">+发货邮费{{transfee}}</span> -->
        </div>
        <div class="error-text" v-if="showAmountTips">{{$t('applyReturn.correctRefundAmount')}}</div>
      </div>
      <div :class="['item', showMobileTips ? 'error' : '']">
        <div class="tit"><span class="asterisk">*</span>{{$t('applyReturn.mobileNumber')}}：</div>
        <div class="fillin-mobilenumber">
          <input
            type="text"
            class="text mobilenum"
            maxlength="11"
            :placeholder="$t('applyReturn.mobileNumberTips')"
            @blur="resetMobileNumber"
            v-model="orderRefundParam.buyerMobile"
          />
        </div>
        <div class="error-text" v-if="showMobileTips">{{$t('applyReturn.correctPhoneNumber')}}</div>
      </div>
      <div class="item">
        <div class="tit">{{$t('applyReturn.refundInstructions')}}：</div>
        <textarea
          class="shop-description"
          :placeholder="$t('applyReturn.refundInstructionsTips')"
          v-model="orderRefundParam.buyerDesc"
          maxlength="200"
        ></textarea>
      </div>
      <div class="item">
        <div class="tit">{{$t('applyReturn.uploadImages')}}：</div>
        <mul-pic-upload v-model="orderRefundParam.photoFiles" :limit="3" />
        <div class="img-des">（ {{$t('applyReturn.uploadThreeVouchers')}} ）</div>
      </div>
      <div class="item">
        <div class="tit">&nbsp;</div>
        <a href="javascript:void(0);" class="btn" @click="applyRefund"
          >{{$t('applyReturn.SubmitRequest')}}</a
        >
      </div>
    </div>
    <!-- /提交售后申请 -->

    <!-- 等待商家处理&&填写运单号 -->
    <div class="box-content apply-return" v-if="!showApplyRefund">
      <!-- 等待商家处理 -->
      <div class="return-wait" v-if="WaitProcessing">
        <div class="return-state">
          <div class="state">{{$t('applyReturn.applicationTips1')}}</div>
          <!-- <div class="rest-time">剩余时间：<span class="time">23时59分</span></div> -->
        </div>
        <div class="return-tip">
          <div class="tip-item" v-if="orderRefundParam.applyType !== 1">
            {{$t('applyReturn.applicationTips2')}}
          </div>
          <div class="tip-item">
            {{$t('applyReturn.applicationTips3')}}
          </div>
          <div class="tip-item" v-if="orderRefundParam.applyType !== 1">
            {{$t('applyReturn.applicationTips4')}}
          </div>
        </div>
        <div class="return-btn">
          <!-- <a href="javascript:void(0);"
          class="btn-g" @click="reviseApply">修改申请</a>-->
          <a
            href="javascript:void(0);"
            class="btn-r"
            @click="cancelApply"
            v-if="returnDetail.isCancel"
            >{{$t('applyReturn.applicationTips5')}}</a
          >
        </div>
      </div>

      <!-- 填写运单号 -->
      <div class="return-wait" v-if="fillInLogistics">
        <div class="return-state">
          <div class="state" v-if="returnDetail.returnMoneySts == 2">
            {{$t('applyReturn.applicationTips6')}}
          </div>
          <div class="state" v-if="returnDetail.returnMoneySts == 3">
            {{$t('applyReturn.applicationTips7')}}
          </div>

          <!-- <div class="rest-time">剩余时间：<span class="time">23时59分</span></div> -->
        </div>
        <div class="return-tip">
          <div class="tip-item">
            {{$t('applyReturn.applicationTips8')}}
          </div>
          <div class="tip-item">
            {{$t('applyReturn.applicationTips9')}}
          </div>
        </div>
        <div class="shop-info">
          <div class="shop-name">
            {{$t('applyReturn.consignee')}}：
            <span class="name">{{
              returnDetail.refundDelivery.receiverName
            }}</span>
            <span class="phone">{{
              returnDetail.refundDelivery.receiverMobile
            }}</span>
          </div>
          <div class="shop-address">
            {{ returnDetail.refundDelivery.receiverAddr }}
          </div>
          <div class="shop-address">
            {{ returnDetail.refundDelivery.senderRemarks }}
          </div>
        </div>
        <div class="return-btn" v-if="returnDetail.returnMoneySts == 2">
          <!-- 填写运单号：
          <input type="text"
                  v-model="logisticsNumber"
          class="return-number">-->
          <a href="javascript:void(0);" class="btn-r" @click="writeLogisticsMsg"
            >{{$t('applyReturn.fillLogisticsInformation')}}</a
          >
        </div>
        <div class="return-btn" v-if="returnDetail.returnMoneySts == 3">
          <a href="javascript:void(0);" class="btn-r" @click="writeLogisticsMsg"
            >{{$t('applyReturn.modifyLogisticsInformation')}}</a
          >
        </div>
      </div>

      <!-- 退款详情 -->
      <div class="return-detail">
        <div class="detail-tit">{{$t('applyReturn.refundDetails')}}</div>
        <div class="item">
          <div class="tit">{{$t('applyReturn.refundedProducts')}}：</div>
          <div class="prod-item">
            <div
              class="goods-info"
              v-for="(refundProd, index) in returnDetail.orderItems"
              :key="index"
            >
              <div class="goods-img">
                <img :src="refundProd.pic" alt />
              </div>
              <div class="goods-text">
                <div class="name">{{ refundProd.prodName }}</div>
                <div class="pri">￥{{ toPrice(refundProd.price) }}</div>
                <div class="sku">
                  {{ refundProd.skuName }}&nbsp;&nbsp;×{{
                    refundProd.prodCount
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-con">
          <div class="det-box">
            <div class="item">
              <div class="tit">{{$t('applyReturn.merchantName')}}：</div>
              <div class="return-text">{{ returnDetail.shopName }}</div>
            </div>
            <div class="item">
              <div class="tit">{{$t('applyReturn.cargoStatus')}}：</div>
              <div class="return-text">
                {{ [$t('applyReturn.noGoodsReceived'), $t('applyReturn.receivedGoods')][orderRefundParam.isReceiver] }}
              </div>
            </div>
            <div class="item">
              <div class="tit">{{$t('applyReturn.orderNumber')}}：</div>
              <div class="return-text">{{ returnDetail.orderNumber }}</div>
            </div>
            <div class="item">
              <div class="tit">{{$t('applyReturn.refundAmount')}}：</div>
              <!-- <div class="return-text">￥{{toPrice(returnDetail.refundAmount)}}</div> -->
              <div class="return-text">
                <span v-if="returnDetail.orderAmount"
                  >￥{{ toPrice(returnDetail.refundAmount) }}</span
                >
                <span
                  v-if="returnDetail.refundScore && returnDetail.orderAmount"
                  >+</span
                >
                <span v-if="returnDetail.refundScore"
                  >{{ returnDetail.refundScore }} {{$t('applyReturn.points')}}</span
                >
              </div>
            </div>
            <!-- <div class="item">
              <div class="tit">商品单价：</div>
              <div class="return-text">￥{{(returnDetail.orderItems[0].price).toFixed(2)}}</div>
            </div>
            <div class="item">
              <div class="tit">商品数量：</div>
              <div class="return-text">{{returnDetail.orderItems[0].prodCount}}件</div>
            </div>-->
            <div class="item">
              <div class="tit">{{$t('applyReturn.applicationNumber')}}：</div>
              <div class="return-text">{{ returnDetail.goodsNum }}{{$t('items')}}</div>
            </div>
            <div class="item error">
              <div class="tit">{{$t('applyReturn.refundReason')}}：</div>
              <div class="return-text">
                {{ refundReasonArray[returnDetail.buyerReason] }}
              </div>
            </div>
          </div>
          <div class="det-box">
            <div class="item">
              <div class="tit">{{$t('applyReturn.refundNumber')}}：</div>
              <div class="return-text">{{ refundSn }}</div>
            </div>
            <div class="item">
              <div class="tit">{{$t('applyReturn.refundType')}}：</div>
              <div class="return-text">
                {{ ['', $t('applyReturn.refundsOnly'), $t('applyReturn.returnsAndRefunds')][returnDetail.applyType] }}
              </div>
            </div>
            <div class="item error">
              <div class="tit">{{$t('applyReturn.transactionTime')}}：</div>
              <div class="return-text">{{ returnDetail.orderPayTime }}</div>
            </div>
            <div class="item">
              <div class="tit">{{$t('applyReturn.courierPostage')}}：</div>
              <div class="return-text">￥{{ toPrice(transfee) }}</div>
            </div>
            <div class="item">
              <div class="tit">{{$t('applyReturn.totalOrderPrice')}}：</div>
              <!-- <div class="return-text">￥{{toPrice(returnDetail.orderAmount)}}</div> -->
              <div class="return-text">
                <span v-if="returnDetail.orderAmount"
                  >￥{{ returnDetail.orderAmount }}</span
                >
                <span
                  v-if="returnDetail.refundScore && returnDetail.orderAmount"
                  >+</span
                >
                <span v-if="returnDetail.refundScore"
                  >{{ returnDetail.refundScore }} {{$t('applyReturn.points')}}</span
                >
              </div>
            </div>
            <div class="item">
              <div class="tit">{{$t('applyReturn.refundInstructions')}}：</div>
              <div class="return-text">{{ returnDetail.buyerDesc }}</div>
            </div>
          </div>
        </div>
        <div class="item" v-if="photoFiles.length">
          <div class="tit">{{$t('applyReturn.uploadImages')}}：</div>
          <div class="img" v-for="(img, index) in photoFiles" :key="index">
            <a href="javascript:viod(0);" class="file-img">
              <img :src="img" alt />
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- /等待商家处理&&填写运单号 -->

    <!-- 弹窗 -->
    <div class="popup-mask" v-if="false"></div>
    <div class="popup-box" v-if="false">
      <div class="tit">
        <div class="text">{{$t('tips')}}</div>
        <div class="close"></div>
      </div>
      <div class="con">
        <div class="tip">
          <div class="tip-icon success"></div>
          <div class="tip-info">
            <div class="result">{{$t('applyReturn.applicationTips10')}}</div>
            <div class="date">{{$t('applyReturn.applicationTips11')}}</div>
            <div class="btns">
              <a href="javascript:void(0);" class="btn">
                {{$t('applyReturn.ViewAfterSalesDetails')}}
                <span class="arrow">&gt;&gt;</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /弹窗 -->

    <!-- 物流信息弹框 -->
    <writeLogisticsInfo
      v-if="showAdd"
      @toggleAddrPop="refreshChange"
      :refundSn="refundSn"
      :orderNumber="orderRefundParam.orderNumber"
      :refundDelivery="returnDetail.refundDelivery"
      :returnMoneySts="returnDetail.returnMoneySts"
    ></writeLogisticsInfo>
  </div>
</template>

<script>
import MulPicUpload from '~/components/mul-pic-upload'
import writeLogisticsInfo from '~/components/write-logistics-info'
import util from '~/plugins/util.js'
import big from '~/plugins/big.min.js'
import { _debounce } from "~/plugins/util"

export default {
  components: {
    MulPicUpload,
    writeLogisticsInfo
  },
  data () {
    return {
      showApplyRefund: false, //填写申请显隐
      WaitProcessing: false, //等待商家处理显隐
      fillInLogistics: false,  //填写物流显隐
      //  退款原因（已收到货）
      // refundProdReasonArray: ['拍错/多拍/不喜欢', '协商一致退款', '商品破损/少件', '商品与描述不符', '卖家发错货', '质量问题', '其他'],
      // 退款原因（未收到货）
      // refundPriReasonArray: ['拍错/多拍/不喜欢', '协商一致退款', '其他'],
      // 退款原因（总）
      // refundReasonArray: ['拍错/多拍/不喜欢', '协商一致退款', '商品破损/少件', '商品与描述不符', '卖家发错货', '质量问题', '其他', '', '拼团失败'],
      refundProdObj: {}, // 订单数据
      orderItem: [],  //订单项
      transfee: this.$route.query.transfee,  //运费
      status: this.$route.query.status,  //订单状态 1:待付款 2:待发货 3:待收货 4:待评价 5:成功 6:失败
      actualTotal: this.$route.query.actualTotal,  //实际总额
      refundAmount: 0, //（最多可退）退款金额
      // 申请售后数据
      orderRefundParam: {
        orderNumber: this.$route.query.orderNumber,  //订单编号
        applyType: 1,  //申请类型(1:仅退款 2退款退货)
        isReceiver: 0,  //货物状态(1:已收到货 0:未收到货)
        buyerReason: '',  //申请原因(下拉选择)
        buyerMobile: '',  //手机号
        buyerDesc: '',  //备注说明
        photoFiles: '', //凭证图片列表
        refundType: this.$route.query.refundType,  //退款单类型（1:整单退款,2:单个物品退
        orderItemId: this.$route.query.orderItemId,  //订单项ID（单个物品退款时使用）
      },
      showSelectTips: true,  //退款原因错误提示显隐
      showAmountTips: false,  //退款金额错误提示显隐
      showMobileTips: false, //手机号码错误提示显隐
      // showBuyerDescTips: false,  //退款说明提示显隐

      //等待商家处理
      returnDetail: {},  //退款详情信息
      refundSn: this.$route.query.refundSn, //退款单号
      photoFiles: [],  //退款详情图片展示
      logisticsNumber: '',  //是否有物流单号

      showAdd: false,

      showReasonOptions: false,  //退款原因选项

      goodsNum: 1,  //计数器数量

      showTransfee: false,  //是否显示含运费提示

      isOnlyProd: false, //是否仅一个商品项（可退运费）

      totalRefundAmount: 0, // 可退总金额（含可退运费）
    }
  },
  computed: {
    //  退款原因（已收到货）
      refundProdReasonArray: function(){
        return [this.$i18n.t('applyReturn.refundReason1'), this.$i18n.t('applyReturn.refundReason2'), this.$i18n.t('applyReturn.refundReason3'), this.$i18n.t('applyReturn.refundReason4'), this.$i18n.t('applyReturn.refundReason5'), this.$i18n.t('applyReturn.refundReason6'), this.$i18n.t('applyReturn.refundReason7')]
      },
      // 退款原因（未收到货）
      refundPriReasonArray: function(){
        return [this.$i18n.t('applyReturn.refundReason1'), this.$i18n.t('applyReturn.refundReason2'), this.$i18n.t('applyReturn.refundReason7')]
      },
      // 退款原因（总）
      refundReasonArray: function(){
        return [this.$i18n.t('applyReturn.refundReason1'), this.$i18n.t('applyReturn.refundReason2'), this.$i18n.t('applyReturn.refundReason3'), this.$i18n.t('applyReturn.refundReason4'), this.$i18n.t('applyReturn.refundReason5'), this.$i18n.t('applyReturn.refundReason6'), this.$i18n.t('applyReturn.refundReason7'), '', this.$i18n.t('applyReturn.refundReason8')]
      }
  },
  mounted () {
    //从缓存中拿到订单项
    this.refundProdObj = JSON.parse(localStorage.getItem('refundProdObj') || '{}')
    this.orderItem = this.refundProdObj.orderItem //商品item
    this.isLastProd = this.orderItem[0].isLastProd // 是否最后一项
    this.isOnlyProd = this.refundProdObj.isOnlyProd // 是否仅一个商品项（可退运费）
    this.goodsNum = this.orderItem[0].prodCount  //商品数量
    //订单项id
    this.orderRefundParam.orderItemId = this.refundProdObj.orderItem[0].orderItemId

    if (!this.returnDetail.refundSn && !this.refundSn) {  //退款编号为空时
      this.showApplyRefund = true //填写申请
    }
    //等待商家处理（修改和撤销按钮页）退款订单详情
    if (this.refundSn || !this.showApplyRefund) {
      this.getReturnDetail()
    }
    this.getRefundAmount()  //计算金额输入框初始默认价格
  },
  methods: {
    /**
     * 处理价格样式
     */
    toPrice (val) {
      var val = Number(val)
      if (!val) {
        val = 0;
      }
      return (val.toFixed(2))
    },

    /**
     * 计算金额输入框初始默认价格
     */
    getRefundAmount () {
      var newTransfee = new big(this.transfee)
      var totalRefundScore = 0 //  totalRefundScore: 实际所有积分即可退换的所有积分
      this.orderItem.forEach(prodItem => {
        totalRefundScore += prodItem.useScore
      })
      this.totalRefundScore = totalRefundScore
      // refundType退款单类型：1.整单退款,2.单个物品退
      if (this.orderRefundParam.refundType == 1) {  //整单退款
        this.actualTotal = this.refundProdObj.actualTotal
        var newActualTotal = new big(this.actualTotal)
        if (this.status == 2 && this.transfee) {  //待发货且有运费
          this.refundAmount = newActualTotal.minus(newTransfee).valueOf()
          this.showTransfee = true
        } else {
          this.actualTotal = this.refundAmount = newActualTotal.minus(newTransfee).valueOf()
          this.showTransfee = false
        }
      } else if (this.orderRefundParam.refundType == 2) {  //单个退
        this.actualTotal = this.refundProdObj.orderItem[0].actualTotal
        var newActualTotal = new big(this.actualTotal)
        this.refundAmount = this.actualTotal
        if (this.status == 2 && this.transfee && (this.isLastProd || this.isOnlyProd)) { // 待发货&&有运费&&(最后一个商品项||仅一个商品项)
          this.actualTotal = newActualTotal.plus(newTransfee).valueOf()
          this.showTransfee = true
        } else {
          this.showTransfee = false
        }
      }

      // 记录可退款总金额
      this.totalRefundAmount = this.actualTotal

    },


    /**
     * 改变商品数量重新计算价格（数量加减）
     */
    changePordNum: function (changeNum) {
      let actualTotal = this.orderItem[0].actualTotal  //商品原始总额（不含运费）
      var prodCount = this.orderItem[0].prodCount  //商品原始总数
      var goodsNum = this.goodsNum + changeNum // 计数器商品总数
      if (goodsNum < 1) {
        this.$message({
          message: this.$i18n.t('applyReturn.returnedGoods'),
          type: 'error',
          duration: 1000
        })
        return
      }
      if (goodsNum > prodCount) {
        this.$message({
          message: this.$i18n.t('applyReturn.refundReason9'),
          type: 'error',
          duration: 1500
        })
        return
      }
      big.DP = 2
      // big.RM = 0
      this.goodsNum = goodsNum
      this.actualTotal = new big(actualTotal).times(goodsNum).div(prodCount).valueOf()
    },

    /**
     * 退款方式选择
     */
    returnType (applyType) {
      applyType == 1 ? this.orderRefundParam.applyType = 1 : this.orderRefundParam.applyType = 2
    },
    /**
     * 货物状态选择
     */
    goodsStatus (isReceiver) {
      isReceiver == 1 ? this.orderRefundParam.isReceiver = 1 : this.orderRefundParam.isReceiver = 0
      this.orderRefundParam.buyerReason = ''
    },
    /**
     * 输入手机号input框过滤
     */
    resetMobileNumber () {  //失去焦点时
      if (!util.checkPhoneNumber(this.orderRefundParam.buyerMobile)) {
        this.showMobileTips = true
      }
      else {
        this.showMobileTips = false
      }
    },
    /**
     * 退款原因选项列表
     */
    selectReason () {
      this.showReasonOptions = true
    },
    /**
     * 退款原因选择
     */
    returnReason (e) {
      this.orderRefundParam.buyerReason = e.target.dataset.idx
      this.orderRefundParam.buyerReasonStr = e.target.dataset.reason
      this.showSelectTips = false
      this.showReasonOptions = false
    },

    // 失焦时校验金额是否输入正确
    resetActualTotal () {
      // 正则限制：正数（小数点后可以保留20位）
      let refundAmountReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,20})?$/
      this.showAmountTips = false
      // 积分为空时，输入框内容不为正数/小于0.01/大于最大退款数，就显示错误提示语
      if (!this.totalRefundScore && (!refundAmountReg.test(this.actualTotal) || this.actualTotal < 0.01 || this.actualTotal > this.totalRefundAmount)) {
        this.showAmountTips = true
      }
    },

    /**
     * 提交售后申请
     */
    applyRefund: _debounce(function () {
      this.orderRefundParam.refundAmount = parseFloat(this.actualTotal) || 0
      // 检查数据完整性
      this.orderRefundParam.refundAmount = parseFloat(this.actualTotal) || 0
      // 正则限制：正数（小数点后可以保留20位）
      let refundAmountReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,20})?$/
      if (!this.orderRefundParam.buyerReason) {  //退款原因
        this.showSelectTips = true
        return
      }
      else if (!this.totalRefundScore && (!refundAmountReg.test(this.actualTotal) || this.actualTotal < 0.01 || this.actualTotal > this.totalRefundAmount)) {
        this.showAmountTips = true
        return
      }
      if (!util.checkPhoneNumber(this.orderRefundParam.buyerMobile)) {
        // 手机号
        this.showMobileTips = true
      } else {
        if (this.orderRefundParam.isReceiver == 0) { // 未收到货
          // 未收到货需要转换一下原因
          this.orderRefundParam.buyerReason == 2 ? this.orderRefundParam.buyerReason = 6 : 0
        }
        if (this.status == 2 && this.isLastProd) {  //待发货(包含运费)并且是最后一件
          this.$confirm(this.$t('applyReturn.refundReason10'), this.$t('applyReturn.tips'), {
            confirmButtonText: this.$t('determine'),
            cancelButtonText: this.$t('cancel'),
            type: 'warning'
          }).then(() => {
            this.applyOrderRefund(this.orderRefundParam)
          }).catch(() => { });
        } else {
          this.applyOrderRefund(this.orderRefundParam)
        }
      }
    }, 500),

    // 请求申请退款接口
    applyOrderRefund (orderRefundParam) {
      this.$axios.post('/p/orderRefund/apply', orderRefundParam)
        .then(({ data }) => {
          this.refundSn = data   //退款编号
          this.$message({
            message: this.$i18n.t('applyReturn.applicationSuccessful'),
            duration: 1000,
            type: 'success'
          });
          setTimeout(() => {
            this.showApplyRefund = false
            this.$router.push({ path: '/order-detail?orderNumber=' + orderRefundParam.orderNumber })
          }, 1500)
        })
    },


    /**
     * 请求退款详情信息
     */
    getReturnDetail () {
      this.$axios.get('/p/orderRefund/info?refundSn=' + this.refundSn)
        .then(({ data }) => {
          this.returnDetail = data
          //详情页图片显示
          if (this.returnDetail.photoFiles) {
            this.photoFiles = (this.returnDetail.photoFiles).split(",");
          }
          if (this.refundSn && this.returnDetail.returnMoneySts == 1) {  //有退款编号且退款状态为1"买家申请"时
            this.WaitProcessing = true  //等待处理
          }
          if (this.refundSn && this.returnDetail.returnMoneySts == 2 || this.returnDetail.returnMoneySts == 3 && this.returnDetail.applyType == 2) {  //退款状态为2"卖家接受"且退款类型为2“退货退款”时
            this.fillInLogistics = true
          }
        })
    },

    /**
     * 撤销申请
     */
    cancelApply () {
      this.$confirm(this.$i18n.t('applyReturn.refundReason11'), this.$i18n.t('applyReturn.tips'), {
        confirmButtonText: this.$t('determine'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$axios.put('/p/orderRefund/cancel', this.refundSn)
          .then(({ data }) => {
            this.$message({
              message: this.$i18n.t('applyReturn.refundReason12'),
              duration: 1000,
              type: 'success'
            });
            setTimeout(() => {
              this.$router.push({ path: '/user-center/uc-return' })
            }, 2000)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$i18n.t('applyReturn.refundReason13'),
          duration: 1000,
        });
      });
    },

    /**
     * 填写 || 修改物流信息
     */
    writeLogisticsMsg () {
      this.showAdd = true
    },
    /**
    * 刷新回调
    */
    refreshChange (visible) {
      this.showAdd = visible
    },

  },
}
</script>

<style scoped src='~/assets/css/apply-return.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
<style scoped src='~/assets/css/uc-edit.css'></style>
<style>
.pic-upload .pic-uploader-component {
  display: block;
  width: 100%;
  height: 100%;
}
.pic-upload .pic-uploader-component .el-upload {
  display: block !important;
}
.el-upload--picture-card {
  line-height: 160px;
}
.apply-return .el-icon-plus {
  width: inherit !important;
  height: inherit !important;
  line-height: inherit !important;
}
</style>
